<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>表格页</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<link href="dataTables/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
	<link href="dataTables/css/dataTables.tableTools.css" rel="stylesheet" type="text/css" />
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	
	<script type="text/javascript" src="js/plugins/spinner/ui.spinner.js"></script>
	<script type="text/javascript" src="js/plugins/spinner/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>

	<!-- 新增js  -->
	<script type="text/javascript" src="dataTables/js/jquery.dataTables.js"></script>	
	<script type="text/javascript" src="dataTables/js/dataTables.tableTools.js"></script>		
  
  </head>
  <body>

	<!-- Right side -->
	<div id="fcontent">
	    <!-- Title area -->
	    <div style="display:none;" class="titleArea">
	        <div class="wrapper">
	            <div  style="display:none;" class="pageTitle">
	                <h5>设备管理</h5>
	                <span>可以查看或修改设备信息</span>
	            </div>

<!-- 	            <div class="clear"></div> -->
	        </div>
	    </div>
<!-- 	    <div class="line"></div> -->
	    
	    <!-- Main content wrapper -->
	    <div class="wrapper">
        <div class="widget">
        	<form id="searchForm">
            <table cellpadding="0" cellspacing="0" width="100%" class="sTable">
                <tbody>
                    <tr>
                        <td>设备名称</td>
                        <td><input type="text" value="" name="STATION_NAME" style="width:90%;height:30px;" /></td>
                        <td>设备编号</td>
                        <td><input type="text" value="" name="STATION_ID" style="width:90%;height:30px;" /></td>
                        <td rowspan="2" style="width:10%;vertical-align: top;">
                        <!-- 
                        <div class="controlB" style="padding: 11px 0 11px 0;">
			            	<ul>
			                	<li><a href="javascript:query();"  title=""><img src="images/icons/control/32/plus.png" alt="" /><span>查询</span></a></li>
			                </ul>
                		</div>
                		-->
                		    <a href="javascript:query();" title="" class="button basic" style="margin: 5px;"><img src="images/icons/dark/magnify.png" alt="" class="icon" /><span style="font-size:12px;">查询</span></a>
                        </td>
                    </tr>
                    <tr>
                        <td>存储模式</td>
                        <td>
                            <select name="STORE_MODE"  style="width:90%;height:30px;"  >
                                <option value=""></option>
                                <option value="0">分类存储</option>
                                <option value="1">混合存储</option>
                            </select>           
                        </td>
                        <td>对时方式</td>
                        <td>
                            <select name="TIME_SOURCE"  style="width:90%;height:30px;"  >
                                <option value=""></option>
                                <option value="0">SNTP</option>
                                <option value="1">1588</option>
                                <option value="2">B码</option>
                            </select>   
						</td>
                    </tr>
                </tbody>
            </table>
            </form>
        </div>  
	        <!-- Note -->
	        <div style="display: none; class="nNote nInformation hideit">
	            <p><strong>INFORMATION: </strong>Statistics info above is clickable, with nice dropdowns and updating status.</p>
	        </div>
	       <!-- Dynamic table -->
	        <div class="widget">
	            <div class="title"><img src="images/icons/dark/full2.png" alt="" class="titleIcon" /><h6>设备列表</h6></div>    
	            <table id="example" class="display" cellspacing="0" width="100%">
					    <thead>
					        <tr>
					            <th>设备编号</th>
					            <th>设备名称</th>
					            <th>对时方式</th>
					            <th>对时服务器</th>
					            <th>端口</th>
					            <th>存储模式</th>
					        </tr>
					    </thead>
					</table> 
	        </div>
	     </div>
	</div>
	<script type="text/javascript">
	var tb1;
	$(function () {
		
		 tb1 = $('#example').dataTable( {
		  	"sDom": 'T<"title">lrtip',
	        "oTableTools": {
	         	"sSwfPath": "dataTables/swf/copy_csv_xls_pdf.swf",
				"sRowSelect": "single",
	            "aButtons": [
	                {
	                    "sExtends":    "text",
	                    "sButtonText": "查看",
	                    "fnClick": function ( nButton, oConfig, oFlash ) {
                        	detail();
                    	}
	                },
	                {
	                    "sExtends":    "text",
	                    "sButtonText": "编辑",
	                    "fnClick": function ( nButton, oConfig, oFlash ) {
                        	edit();
                    	}
	                }
	            ],
	            // "sRowSelect": "os"
	        },
	        "sServerMethod":"POST",
		 	"searching":false,
		 	"bFilter":true,
		 	"bServerSide": true,
		 	"bProcessing":true,
		 	"bSort":false,
		 	"sAjaxDataProp" : "dataResult",
	        //"ajax": "http://localhost:8080/iService/demo/grid/queryList",
	        "sAjaxSource": "configGrid/queryDeviceList?ajaxFlag=1", //给服务器发请求的url
	        "columns": [
	            { "data": "STATION_ID","sClass": "center" },
	            { "data": "STATION_NAME","sClass": "center" },
	            { "data": "TIME_SOURCE_TXT","sClass": "center" },
	            { "data": "TIME_SVR","sClass": "center" },
	            { "data": "TIME_PORT","sClass": "center" },
	            { "data": "STORE_MODE_TXT","sClass": "center" }
	            
	        ],
	         "oLanguage" : {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "抱歉， 没有找到",
                "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sZeroRecords": "没有检索到数据",
                "sSearch": "名称:",
                "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "前一页",
                "sNext": "后一页",
                "sLast": "尾页"
                }
                     
            }
	    } );

	   // tb1.fnSetColumnVis( 0, false);//隐藏列  
	    
	        $("#btnTest").click(function () {
                /*
                 $('#example tbody tr.DTTT_selected.selected').each(function () {                
                	alert($(this).children('td').eq(0).html());
            	});
            	*/
            	var table = $('#example').DataTable();
            	alert( 'Row index: '+JSON.stringify(table.row('.selected').data().STATION_ID) );
            });
            /*
            //列排序
            $("th").click(function () {
				//alert($(this).attr("class"));
	        	var oSettings = tb1.fnSettings();
                oSettings.sAjaxSource = "configGrid/queryDeviceList?ajaxFlag=1";
                tb1.fnClearTable(0);
                tb1.fnDraw();
            });	
            */    
	});
	//查看
	function detail(){
		if(!isSelect()) return;
		var table = $('#example').DataTable();
		var STATION_ID = table.row('.selected').data().STATION_ID;
		var url = '../SysConfigForm/deviceConfigDetail?STATION_ID='+STATION_ID
   		window.showModalDialog(url,window,'dialogWidth:800px;dialogHeight:600px');
		
	}
	//修改
	function edit(){
		if(!isSelect()) return;
		var table = $('#example').DataTable();
		var STATION_ID = table.row('.selected').data().STATION_ID;
		var url = '../SysConfigForm/deviceConfigEdit?STATION_ID='+STATION_ID;
   		window.showModalDialog(url,window,'dialogWidth:800px;dialogHeight:600px');
	}
	
	//判断是否选中一条记录
	function isSelect(){
		var flag = true;
		var data = $('#example').DataTable().row('.selected').data();
		if(data==undefined){
			flag = false;
			alert('请选择一条记录！');
		}
		return flag; 
	}
	
	//查询
	function query(){
		  var param = $("#searchForm").serialize();
		  param = encodeURI(param);
		  var oSettings = tb1.fnSettings();
          oSettings.sAjaxSource = "configGrid/queryDeviceList?ajaxFlag=1&"+param;
          tb1.fnClearTable(0);
          tb1.fnDraw();
	}
	
	
	</script>
  </body>
</html>
